import React from 'react';
import Router from 'next/router';
import { NavBar, Icon } from 'antd-mobile';

import { getRequest, postRequest } from '../../tools/requests';

import HeadC from '../../src/components/layout/head';
import FooterC from '../../src/components/layout/footer';
import CustomSwipper from '../../src/components/customSwipper';
import './index.css';

const CategoryPageSize = 20;

export default class Categories extends React.Component {
  static async getInitialProps({query}) {
    let goodsLists;
    const navLists = await postRequest('get_second_classify/', {upper_level_id: query.cateId})
    const secondClassify = navLists.length > 0 ? navLists[0].name : '';
    const fetchGoodsLists = await getRequest('goods_list/', {page: 1, page_size: CategoryPageSize, topcate: query.cateName, subcate: secondClassify})
    goodsLists = fetchGoodsLists.data || []
    return {
      initData: 'category',
      title: 'coupon',
			description: '',
			links: '',
			ogImage: '',
      goodsLists,
      navLists,
      cateName: query.cateName,
      cateId: query.cateId
    }
  }
  constructor(props) {
    super(props);
    this.state = {
      appHeight: 0
    }
  }
  componentDidMount() {
    const docHeight = document.documentElement.clientHeight;
    this.setState({
      appHeight: docHeight
    })
  }
  render() {
    const { title, description, links, ogImage, goodsLists } = this.props;
    return (
      <div className="app-block" style={{height: this.state.appHeight}}>
        <HeadC 
					title={title} 
					description={description}
					links={links}
					ogImage={ogImage}
				></HeadC>
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => Router.back()}
          style={{color: '#fa4d47', zIndex: 999}}
        >{ this.props.cateName }</NavBar>
        {
          goodsLists.length ? (
            <CustomSwipper 
              // goodsLists={this.props.goodsLists}
              navLists={this.props.navLists}
              cateName={this.props.cateName}
              cateId={this.props.cateId}
            />
          ) : (
            <div
              style={{textAlign: 'center', color: '#999', marginTop: '50px'}}
            >暂无数据</div>
          )
        }
        <FooterC src="../../static/images/police.png" />
      </div>
    )
  }
}
